<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/body.css" />
		<link rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
		<script type="text/javascript" src="../js/getPath.js" ></script>
	</head>
	<style>
		.container{
			margin-left: 200px;
			margin-top: 30px;
		}
		tr,
		th{
			text-align: center;
		}
		#delete-success,
		#delete-error,
		#update-success,
		#update-error,
		#preOrder-success,
		#preOrder-error{
			padding-top: 150px;
			margin: 0px auto;
			width: 150px;
		}
	</style>
	<body>
	
		<div class="modal fade" id="update">
		    <div class="modal-dialog">
		        <div class="modal-content">
		        	<form class="form-horizontal" role="form" action="" method="post">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="myModalLabel">修改</h4>
			            </div>
			            <div class="form-group" style="margin-top: 20px;">
							<label for="inputEmail3" class="col-sm-2 control-label">门票名字</label>
							<div class="col-sm-7">
								<input type="text" name="ticketName" class="form-control" placeholder="门票名字" />
							</div>
						</div>
						<div class="form-group" style="margin-top: 20px;">
							<label for="inputEmail3" class="col-sm-2 control-label">门票价格</label>
							<div class="col-sm-7">
								<input type="text" name="ticketPrice" class="form-control" placeholder="门票价格" />
							</div>
						</div>
						<div class="form-group" style="margin-top: 20px;">
							<label for="inputEmail3" class="col-sm-2 control-label">状态</label>
							<div class="col-sm-7">
								<input type="text" name="ticketStatus" class="form-control" placeholder="状态" />
							</div>
						</div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-danger" data-dismiss="modal" >关闭</button>
			                <button type="button" class="btn btn-primary" data-dismiss="modal" name="ticketId" id="updateTicket">提交更改</button>
			            </div>
			        </form>
		        </div>
		    </div>
		</div>
		
		
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-10 column">
					<table class="table table-hover table-bordered">
						<thead>
							<tr class="active">
								<th>门票编号</th>
								<th>门票名字</th>
								<th>门票价格</th>
								<th>旅游日期</th>
								<th>审核状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="tbody">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
		
		<!-- 这是删除成功的页面，默认隐藏 -->
		<div class="modal fade" id="delete-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-success alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    删除成功
	        </div>
		</div>
		
		<!-- 这是删除失败的页面，默认隐藏 -->
		<div class="modal fade" id="delete-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-danger alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    删除失败
	        </div>
		</div>
		<!-- 这是预购成功的页面，默认隐藏 -->
		<div class="modal fade" id="preOrder-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-success alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    预购成功
	        </div>
		</div>
		
		<!-- 这是预购失败的页面，默认隐藏 -->
		<div class="modal fade" id="preOrder-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-danger alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    预购失败
	        </div>
		</div>
		
		<!-- 这是修改成功的页面，默认隐藏 -->
		<div class="modal fade" id="update-success" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-success alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    修改成功
	        </div>
		</div>
		<!-- 这是修改失败的页面，默认隐藏 -->
		<div class="modal fade" id="update-error" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="alert alert-danger alert-dismissable">
	            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
	                &times;
	            </button>
	        	    修改失败
	        </div>
		</div>
	</body>
	<script>
		$(function(){
			var start = 0;
			var end   = 3;
			ajax(start,end);
			
			/**
			 * 修改
			 */
			$('body').on('click','#updateTicket',function(){
				
				var a = $('button[name="ticketId"]').attr("value");
				var b = $('input[name="ticketName"]').val();
				
				$.ajax({
					type:"post",
					data:({
						"method":"ticketUpdate",
						"ticketId":$('button[name="ticketId"]').attr("value"),
						"ticketName":$('input[name="ticketName"]').val(),
						"ticketPrice":$('input[name="ticketPrice"]').val(),
						"ticketStatus":$('input[name="ticketStatus"]').val(),
					}),
					url:getPath() + "/ticket",
					dataType:"json",
					success:function(jsonData){
						if(jsonData.result == 'success'){
							$('#update-success').modal('show');
							
							//闭包
							$('.close').bind('click',function(){
								$('#tbody').empty();
								ajax(start,end);
							});
							
						}else{
							$('#update-error').modal('show');
						}
					}
				})
			});
			
			
			/**
			 * 修改(填充)
			 */
			$('body').on('click','.btn-warning',function(){
				$.ajax({
					type:"post",
					data:({
						"method":"ticketFindById",
						"ticketId":this.value,
					}),
					url:getPath() + "/ticket",
					dataType:"json",
					success:function(jsonData){
						$(jsonData.data).each(function(index,data){
							$('input[name="ticketName"]').val(data.ticketName);
							$('input[name="ticketPrice"]').val(data.ticketPrice);
							$('input[name="ticketStatus"]').val(data.ticketStatus);
							$('button[name="ticketId"]').attr("value",data.ticketId);
						});
					}
				})
			});
			
			/**
			 * 删除
			 */
			$('body').on('click','.btn-danger',function(){
				$.ajax({
					type:"post",
					data:({
						"method":"ticketDelete",
						"ticketId":this.value,
					}),
					url:getPath() + "/ticket",
					dataType:"json",
					success:function(jsonData){
						if(jsonData.result == 'success'){
							$('#delete-success').modal('show');		
							$('#tbody').empty();
							ajax(start,end);
						}else{
							$('#delete-error').modal('show');
						}
					}
				})
			});
			
			/**
			 * 预购
			 */
			$('body').on('click','.btn-success',function(){
				var money = $(this).parent().parent().children().eq(2);
				$.ajax({
					type:"post",
					data:({
						"method":"preOrderAdd",
						"ticketId":this.value,
						"money":money.text(),
					}),
					url:getPath() + "/order",
					dataType:"json",
					success:function(jsonData){
						if(jsonData.result == 'success'){
							$('#preOrder-success').modal('show');
						}else{
							$('#preOrder-error').modal('show');
						}
					}
				})
			});
		});
		
		function ajax(start,end){
			$.ajax({
				type:"post",
				data:({
					"method":"ticketQuery",
					"start":start,
					"end":end,
				}),
				url:getPath() + "/ticket",
				dataType:"json",
				success:function(jsonData){
					$(jsonData.data).each(function(index,data){
						var tr = $('<tr class="info"></tr>');
						var ticketId = $('<td>' + data.ticketId + '</td>');
						var ticketName = $('<td>' + data.ticketName + '</td>');
						var ticketPrice = $('<td>' + data.ticketPrice + '</td>');
						var ticketTime = $('<td>' + data.ticketTime + '</td>');
						var ticketStatus = $('<td></td>');
						var operating = $('<td></td>');
						if(data.ticketStatus == '1'){
							ticketStatus.text('审核通过');
							operating.append('<button value=' + data.ticketId + ' type="button" class="btn btn-success">订购</button>');
						}else{
							ticketStatus.text('审核未通过');
							operating.append('<button value=' + data.ticketId + ' type="button" data-toggle="modal" data-target="#update" class="btn btn-warning">修改</button>');
							operating.append('<button value=' + data.ticketId + ' type="button" class="btn btn-danger">删除</button>');
						}
						tr.append(ticketId);
						tr.append(ticketName);
						tr.append(ticketPrice);
						tr.append(ticketTime);
						tr.append(ticketStatus);
						tr.append(operating);
						$('#tbody').append(tr);
					});
				}
			});
		}
	</script>
</html>
